<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/start' }">企业后台</el-breadcrumb-item>
      <el-breadcrumb-item>公司实名认证</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
        <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入账号进行搜索"
            v-model="input"
            clearable
            size="medium"
          >
            <el-button
              type="primary"
              slot="append"
              icon="el-icon-search"
              @click="search()"
            ></el-button>
          </el-input>
        </el-col>
        <!-- 新增按钮 -->
        <el-col :span="8">
          <el-button type="primary" @click="adds()" icon="el-icon-circle-plus"
            >新增</el-button
          >
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%" border>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="number" label="证件编号"> </el-table-column>
        <el-table-column prop="name" label="公司证件名称"> </el-table-column>
        <el-table-column prop="detail" label="证件描述"> </el-table-column>
        <el-table-column prop="picture" label="证件图片"> 
          <template slot-scope="scope">
              <!-- 查看按钮 -->
              <el-button
                type="success"
                icon="el-icon-edit"
                @click="sets(scope.row)"
                size="mini"
                >查看证件照片</el-button
              >
            </template>
          </el-table-column>
        
      </el-table>
      <!-- 添加弹出框 -->
      <el-dialog title="新增证件" :visible.sync="el_show">
        <el-form>
          <el-form-item label="证件标号" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入证件标号"
              v-model="number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司证件名称" :label-width="formLabelWidth">
            <el-input
              v-model="name"
              autocomplete="off"
              placeholder="请输入公司证件名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="证件描述" :label-width="formLabelWidth">
            <el-input
              v-model="detail"
              autocomplete="off"
              placeholder="请输入描述"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="pushs()">新 增</el-button>
          <el-button @click="err()">取 消</el-button>
        </div>
      </el-dialog>


      <!-- 查看证件 -->
      <el-dialog title="查看证件" :visible.sync="el_xiu">  
        <a-upload
           action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
           list-type="picture-card"
          :file-list="fileList"
          @preview="handlePreview"
         @change="handleChange"
       >
        <div v-if="fileList.length < 8">
         <a-icon type="plus" />
           <div class="ant-upload-text">
           Upload
          </div>
        </div>
       </a-upload>
       <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
         <img alt="example" style="width: 100%" :src="previewImage" />
       </a-modal>
      </el-dialog>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[6, 10, 15]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="6"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// 查看照片
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}
export default {
  data() {
    return {
      // 查看照片
      previewVisible: false,
      previewImage: '',
      fileList: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: 'image.png',
          status: 'done',
          url:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-3',
          name: 'image.png',
          status: 'done',
          url:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
      ],
      // 查看照片
      searchs: [],
      input: null,
      // 查找列表
      searchtableData: [
        {
          number: '741852961',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 0,
        },
        {
          number: '741852962',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 1,
        },
        {
          number: '741852963',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 2,
        },
        {
          number: '741852964',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 3,
        },
        {
          number: '741852965',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 4,
        },
        {
          number: '741852966',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 5,
        },
      ],
      // 显示列表
      tableData: [
        {
          number: '741852961',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 0,
        },
        {
          number: '741852962',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 1,
        },
        {
          number: '741852963',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 2,
        },
        {
          number: '741852964',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 3,
        },
        {
          number: '741852965',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 4,
        },
        {
          number: '741852966',
          name: '营业执照',
          detail: '营业必须证件',
          picture: '未发布',
          id: 5,
        },
      ],
      el_show: false,

      el_xiu: false,
      name: '',
      number: '',
      detail: '',
      picture: '',
      newtable: {
        name: '',
        number: '',
        detail: '',
        picture: '',
      },
      formLabelWidth: '120px',
      newid: 0,

      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    }
  },
  methods: {
    // 查看照片
    handleCancel() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
    // 分页

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 查找
    search: function () {
      console.log(this.input)
      this.tableData.map((item) => {
        if (this.input == null || this.input == '') {
          this.tableData = this.searchtableData
          return
        } else if (item.number.includes(this.input)) {
          this.searchs = []
          this.searchs.push(item)
          console.log(this.searchs)
          this.tableData = this.searchs
          console.log(this.tableData)
          return
        }
      })
    },
    // 添加
    adds: function () {
      this.el_show = true
    },
    err: function () {
      this.el_show = false
    },
    // 删除
    removes: function (v) {
      console.log(v.id)
      this.newid = this.tableData.findIndex((item) => {
        return item.id == v.id
      })
      this.$confirm('此操作将永久删除该证件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.tableData.splice(this.newid, 1)
          this.searchtableData = this.tableData
          console.log(this.tableData)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 添加按钮
    pushs: function () {
      if (!this.number || !this.name || !this.detail) {
        this.$message.error('内容不能为空')
        return
      }
      let ids =
        Math.max(
          ...this.tableData.map(function (item) {
            return item.id
          })
        ) + 1
      this.tableData.push({
        number: this.number,
        name: this.name,
        detail: this.detail,
        picture: this.picture,
        id: ids,
      })
      this.searchtableData = this.tableData
      this.$message({
        message: '创建成功',
        type: 'success',
      })
      ;(this.number = ''),
        (this.name = ''),
        (this.detail = ''),
        (this.picture = '')
    },
   
    // 修改
    sets: function (val) {
      this.el_xiu = true
    },
  
    xg_err: function () {
      this.el_xiu = false
    }
  },
}
</script>
<style scoped>
/* 全局样式 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    padding-bottom: 15px;
    font-size: 13px;
}
.el-table {
    margin-top: 15px;
}
.el-pagination {
    margin-top: 15px;
}
.el-carousel {
    margin-top: 15px;
}

</style>